import React, { useState } from "react";
import { UserOutlined, LockOutlined, MailOutlined } from "@ant-design/icons";
import { Button, Form, Input, message, Checkbox } from "antd";
import { Link, useNavigate } from "react-router-dom";
import "./Register.css";

const Register: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const onFinish = (values: any) => {
    console.log("Received values of form: ", values);
    setLoading(true);
    
    // 模拟注册请求
    setTimeout(() => {
      setLoading(false);
      message.success("注册成功！");
      // 注册成功后跳转到登录页
      navigate("/login");
    }, 1500);
  };

  return (
    <div className="register-container">
      {/* 左侧图像区域 */}
      <div className="register-left">
        <div className="register-left-content">
          <h1>欢迎加入我们</h1>
          <p>创建账户以访问更多功能</p>
        </div>
      </div>
      
      {/* 右侧注册表单区域 */}
      <div className="register-right">
        <div className="register-form-container">
          <div className="register-logo">
            <h2>用户注册</h2>
          </div>
          
          <Form
            name="register"
            className="register-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                { required: true, message: "请输入用户名!" },
                { min: 3, message: "用户名至少3个字符!" }
              ]}
            >
              <Input 
                prefix={<UserOutlined className="site-form-item-icon" />} 
                placeholder="用户名" 
                autoComplete="username"
              />
            </Form.Item>
            
            <Form.Item
              name="email"
              rules={[
                { required: true, message: "请输入邮箱地址!" },
                { type: "email", message: "请输入有效的邮箱地址!" }
              ]}
            >
              <Input 
                prefix={<MailOutlined className="site-form-item-icon" />} 
                placeholder="邮箱" 
                autoComplete="email"
              />
            </Form.Item>
            
            <Form.Item
              name="password"
              rules={[
                { required: true, message: "请输入密码!" },
                { min: 6, message: "密码至少6个字符!" }
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
                autoComplete="new-password"
              />
            </Form.Item>
            
            <Form.Item
              name="confirm"
              dependencies={['password']}
              rules={[
                { required: true, message: "请确认密码!" },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次输入的密码不一致!'));
                  },
                }),
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="确认密码"
                autoComplete="new-password"
              />
            </Form.Item>
            
            <Form.Item
              name="agreement"
              valuePropName="checked"
              rules={[
                { validator: (_, value) => value ? Promise.resolve() : Promise.reject(new Error('请同意用户协议!')) }
              ]}
            >
              <Checkbox>
                我已阅读并同意 <a href="">用户协议</a> 和 <a href="">隐私政策</a>
              </Checkbox>
            </Form.Item>
            
            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                className="register-form-button"
                loading={loading}
                block
              >
                注册
              </Button>
            </Form.Item>
            
            <Form.Item>
              <div className="register-login-link">
                已有账户？ <Link to="/login">立即登录</Link>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default Register;